import React, {Component} from 'react';
import commonConfig from "../../static/js/commonConfig";
import HeadComponent from "../common/headComponent";
import ContentComponent from "../common/contentComponent";
import '../../static/scss/fileViewer/textViewer.scss'
import csvToJson from "../../static/plugins/csvToJson";
import {Radio, Table} from "antd";

class ExcelViewerApp extends Component {
    state = {
        name: '',
        url: '',
        dataList: {},
        navList: [],
        dataSource: [],
        columns: [],
        currentNav: ''
    }

    componentWillMount() {
        let {bucketName, fileUrl, name} = commonConfig.getUrlParams(this);
        name = name.substring(0, name.lastIndexOf('.'));
        this.setState({name, url: commonConfig.downloadFile({bucketName, fileUrl})}, () => {
            csvToJson.getExcelToJson(this.state.url, msg => {
                let navList = Object.keys(msg);
                this.setState({dataList: msg, navList, currentNav: navList[0]}, () => {
                    this.constructTableData();
                });
            })
        });
    }

    /*构造表格数据*/
    constructTableData = () => {
        const {dataList, currentNav} = this.state;
        let msg = dataList[currentNav];
        if (msg.length > 0) {
            this.constructTableHeadData(msg[0])
            let dataSource = msg;
            commonConfig.setKeys(dataSource);
            this.setState({dataSource})
        } else {
            this.setState({dataSource: [], columns: []})
        }
    }
    /*构造表格头部数据*/
    constructTableHeadData = (head) => {
        head = head || {};
        let columns = [];
        for (const headKey in head) {
            if (head.hasOwnProperty(headKey)) {
                columns.push({
                    title: headKey,
                    dataIndex: headKey,
                    key: headKey
                });
            }
        }
        this.setState({columns});
    }

    buttonChange = e => {
        this.setState({currentNav: e.target.value}, () => {
            this.constructTableData();
        })
    }

    render() {
        const {name, columns, dataSource, navList, currentNav} = this.state;
        const tableProps = {
            columns,
            dataSource,
            pagination: {
                pageSizeOptions: [10, 20, 50, 100, dataSource.length]
            }
        }
        return (
            <>
                <div className="pdf_viewer_module text_viewer_module excel_viewer_module">
                    <HeadComponent noNav={true} {...this.props}>
                        <div className="viewer_head float-left">
                            <h3>在线文件预览</h3>
                        </div>
                    </HeadComponent>
                    <div className="main_container animate__animated animate__fadeIn">
                        <ContentComponent copyrightStyle={{position: 'static'}}>
                            <div>
                                <h4>{name}</h4>
                                <div className="excel_style">
                                    <div className="table_box animateFadeInUp">
                                        {navList.length > 1 ?
                                            <Radio.Group value={currentNav} onChange={this.buttonChange}>
                                                {navList.map((item, i) =>
                                                    <Radio.Button key={i} value={item}>{item}</Radio.Button>
                                                )}
                                            </Radio.Group> : null}
                                        <Table className="custom_table_style" {...tableProps}/>
                                    </div>
                                </div>
                            </div>
                        </ContentComponent>
                    </div>
                </div>
            </>
        )
    }
}

export default ExcelViewerApp